<template>
  <div>
    <div class="header">
      <div class="title-wrapper">
        <img
          src="@/assets/icons/home_live_item_left_icons.webp"
          alt="left decoration"
          class="decor-img"
        />
        <div class="title">
          <img src="@/assets/icons/home_recomment_bg.webp" class="bg" />
          <h2>赛事直达</h2>
        </div>

        <img
          src="@/assets/icons/home_live_item_right_icons.webp"
          alt="right decoration"
          class="decor-img"
        />
      </div>
      <div class="tabs">
        <button
          v-for="tab in tabs"
          :key="tab"
          :class="{ active: tab.val === selectTab }"
          @click="selectTabHandle(tab)"
        >
          {{ tab.name }}
        </button>
      </div>
      <div class="football-leagues">
        <div class="hero-section">
          <img
            src="@/assets/imgs/home-match-r-example.webp"
            alt="Football players and trophy"
            class="hero-image"
          />
        </div>
        <div class="right">
          <div class="leagues-section">
            <div
              class="leagues-section-wrapper"
              v-for="(league, index) in list[selectTab - 1]"
              :key="league.id"
              @click="() => clickHandle(index)"
            >
              <div class="league-card" :class="{ active: index === selectSubTab }">
                <img
                  :src="league?.imgUrl?.src + '&w=256&q=75'"
                  :alt="league.name"
                  class="league-logo"
                />
                <span class="league-name">{{ league.title }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="more-info">
            <a href="#" class="more-info-link">查看资料库 &raquo;</a>
          </div> -->
        </div>
      </div>
      <!-- <button class="more-button">查看更多直播 ></button> -->
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { getRecommendMatchList } from '@/api/home'
import { eg, eu } from '@/assets/legname.js'
// const selectIndex = ref(0)
// const leagues = ref()
console.log(eg, eu, 'eg eu')
const tabs = ref(eu)
const list = ref(eg)

const selectTab = ref(tabs.value[0].val)
const selectSubTab = ref(0)
const clickHandle = (index) => {
  selectSubTab.value = index
}
const selectTabHandle = (tab) => {
  selectTab.value = tab.val
  selectSubTab.value = 0
}

// const getData = async () => {
//   try {
//     const res = await getRecommendMatchList()
//     console.log(res, 'res')
//   } catch (error) {
//     console.log(error, 'error')
//   }
// }
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;

  .title-wrapper {
    display: flex;
    align-items: center;
    //   background-image: url('background-image.jpg'); /* 背景图片 */
    //   background-size: cover;
    //   background-position: center;
    //   padding: 10px 20px;
    //   border-radius: 10px;
    width: 100%;
    padding: 90px 0 40px;
    //   max-width: 800px;
    //   position: relative;

    .title {
      position: relative;
      display: flex;
      align-content: center;
      justify-content: center;
      margin: 0 15px;

      .bg {
        width: 340px;
        height: 58px;
        position: relative;
        top: -20px;
      }
      h2 {
        // font-size: 24px;
        //   margin: 0 10px;
        // color: white; /* 文字颜色根据背景图片调整 */
        z-index: 1;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 600;
        font-size: 40px;
        color: #525a79;
        position: absolute;
        bottom: 0;
        &::after {
          content: '';
          position: absolute;
          bottom: -17px;
          left: 50%;
          margin-left: -30px;
          width: 60px;
          height: 10px;
          background: linear-gradient(150deg, #2cea3d 16%, #22d13c 49%, #17b33b 100%);
          box-shadow: 0px 4px 8px 0px rgba(0, 255, 10, 0.25);
          border-radius: 8px 8px 8px 8px;
        }
      }
    }
    .decor-img {
      // width: 20px; /* 根据需要调整图片大小 */
      height: auto;
      width: 515px;
      flex: 1;
    }
  }

  .more-button {
    background: none;
    //   border: none;
    color: #949cbd;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    width: 160px;
    height: 38px;
    background: url('@/assets/icons/home_live_item_more_btn.webp') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
}
.tabs {
  display: flex;
  gap: 10px;
  margin: 10px 0;

  button {
    // padding: 10px 15px;
    border: none;
    border-radius: 20px;
    // background-color: #f5f5f5;
    cursor: pointer;
    outline: none;
    font-size: 16px;
    background: url('@/assets/icons/home_live_item_btn_bg.webp') no-repeat;
    width: 120px;
    height: 40px;
    background-size: 100% 100%;
    color: #525a79;
    // cursor: pointer;
    &.active {
      background: url('@/assets/icons/home_live_active_item_btn_bg.webp') no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
    }
  }
}

.football-leagues {
  display: flex;
  //   flex-direction: column;
  width: 100%;
  align-items: center;
  height: 510px;
  font-family: Arial, sans-serif;
  //   box-shadow: 0 10px 20px 0 rgba(91, 102, 139, 0.2);
  //   border: 1px solid hsla(0, 0%, 100%, 0.4);
  border-radius: 10px;
  margin-top: 30px;
  .right {
    flex: 1;
  }
}

.hero-section {
  //   width: 700px;
  overflow: hidden;
  //   flex: 1;
  width: 810px;
  .hero-image {
    width: 100%;
    object-fit: cover;
    height: 500px;
  }
}

.leagues-section {
  display: flex;
  //   flex: 1;
  width: 740px;
  overflow: scroll;
  align-items: center;
  min-height: 350px;
  margin-left: 10px;
  &::-webkit-scrollbar {
    display: none;
  }

  //   justify-content: space-around;
  //   padding: 20px 0;

  //   background-color: #f0f0f0;
}
.leagues-section-wrapper {
  //   width: 203px;
  //   height: 300px;
}
.league-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 276px;
  background: url('@/assets/icons/home_recomment_item_bg.webp') no-repeat;
  background-size: 100% 100%;
  margin-right: 26px;
  transition: all 0.2s;
  cursor: pointer;
  .league-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }

  .league-name {
    font-size: 14px;
    color: #333;
  }
  &.active {
    width: 203px;
    height: 300px;
    background-size: 100% 100%;
  }
  //   &:hover {
  //     background-size: 203px 300px;
  //   }
}

.more-info {
  text-align: center;
  //   padding: 10px 0;

  .more-info-link {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    background: none;
    //   border: none;
    color: #949cbd;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    width: 160px;
    height: 38px;
    line-height: 38px;
    background: url('@/assets/icons/home_live_item_more_btn.webp') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    display: inline-block;
    margin: 0 auto;

    // &:hover {
    //   text-decoration: underline;
    // }
  }
}
</style>
